<template><div><p>本文档最新版为 <a href="https://learnku.com/docs/laravel/10.x" target="_blank" rel="noopener noreferrer">10.x</a>，旧版本可能放弃维护，推荐阅读最新版！</p>
<h2 id="blade-模板" tabindex="-1"><a class="header-anchor" href="#blade-模板"><span>Blade 模板</span></a></h2>
<ul>
<li><a href="#introduction">简介</a>
<ul>
<li><a href="#supercharging-blade-with-livewire">通过 Livewire 增强 Blade</a></li>
</ul>
</li>
<li><a href="#displaying-data">数据显示</a>
<ul>
<li><a href="#html-entity-encoding">HTML 实体字符</a></li>
<li><a href="#blade-and-javascript-frameworks">Blade 和 JavaScript 框架</a></li>
</ul>
</li>
<li><a href="#blade-directives">Blade 指令</a>
<ul>
<li><a href="#if-statements">If 语句</a></li>
<li><a href="#switch-statements">Switch 语句</a></li>
<li><a href="#loops">循环</a></li>
<li><a href="#the-loop-variable">循环变量</a></li>
<li><a href="#conditional-classes">条件类</a></li>
<li><a href="#additional-attributes">附加属性</a></li>
<li><a href="#including-subviews">包含子视图</a></li>
<li><a href="#the-once-directive"><code v-pre>@once</code> 指令</a></li>
<li><a href="#raw-php">原生 PHP</a></li>
<li><a href="#comments">注释</a></li>
</ul>
</li>
<li><a href="#components">组件</a>
<ul>
<li><a href="#rendering-components">渲染组件</a></li>
<li><a href="#passing-data-to-components">组件传参</a></li>
<li><a href="#component-attributes">组件属性</a></li>
<li><a href="#reserved-keywords">保留关键字</a></li>
<li><a href="#slots">插槽</a></li>
<li><a href="#inline-component-views">内联组件视图</a></li>
<li><a href="#dynamic-components">动态组件</a></li>
<li><a href="#manually-registering-components">手动注册组件</a></li>
</ul>
</li>
<li><a href="#anonymous-components">匿名组件</a>
<ul>
<li><a href="#anonymous-index-components">匿名索引组件</a></li>
<li><a href="#data-properties-attributes">数据属性 / 特性</a></li>
<li><a href="#accessing-parent-data">访问父级数据</a></li>
<li><a href="#anonymous-component-paths">匿名组件路径</a></li>
</ul>
</li>
<li><a href="#building-layouts">构建布局</a>
<ul>
<li><a href="#layouts-using-components">使用组件构建布局</a></li>
<li><a href="#layouts-using-template-inheritance">使用模板继承构建布局</a></li>
</ul>
</li>
<li><a href="#forms">表单</a>
<ul>
<li><a href="#csrf-field">CSRF 字段</a></li>
<li><a href="#method-field">Method 字段</a></li>
<li><a href="#validation-errors">验证错误</a></li>
</ul>
</li>
<li><a href="#stacks">堆栈</a></li>
<li><a href="#service-injection">服务注入</a></li>
<li><a href="#rendering-inline-blade-templates">渲染内联 Blade 模板</a></li>
<li><a href="#rendering-blade-fragments">渲染 Blade 片段</a></li>
<li><a href="#extending-blade">Blade 扩展</a>
<ul>
<li><a href="#custom-echo-handlers">自定义 Echo 处理</a></li>
<li><a href="#custom-if-statements">自定义 If 语句</a></li>
</ul>
</li>
</ul>
<h2 id="简介" tabindex="-1"><a class="header-anchor" href="#简介"><span>简介</span></a></h2>
<p>Blade 是 Laravel 附带的简单而强大的模板引擎。与一些 PHP 模板引擎不同，Blade 不限制你在模板中使用纯 PHP 代码。实际上，所有的 Blade 模板都会被编译成纯 PHP 代码并缓存，除非它被修改，否则不会重新编译，这意味着 Blade 几乎不会给你的应用程序增加任何开销。Blade 模板文件使用 <code v-pre>.blade.php</code> 文件扩展名，并通常存储在 <code v-pre>resources/views</code> 目录中。</p>
<p>可以使用全局 <code v-pre>view</code> 帮助程序从路由或控制器返回模板视图。当然，如 <a href="https://learnku.com/docs/laravel/11.x/views" target="_blank" rel="noopener noreferrer">视图</a> 文档中所述，可以使用 <code v-pre>view</code> 助手函数的第二个参数将数据传递到Blade视图：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Route</span><span class="token operator">::</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'greeting'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'name'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Finn'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="通过-livewire-增强-blade" tabindex="-1"><a class="header-anchor" href="#通过-livewire-增强-blade"><span>通过 Livewire 增强 Blade</span></a></h3>
<p>想要将你的Blade模板提升到一个新的水平并轻松构建动态界面吗？查看 <a href="https://livewire.laravel.com/" target="_blank" rel="noopener noreferrer">Laravel Livewire</a> 。 Livewire允许你编写增强了动态功能的Blade组件，这些功能通常只能通过 React 或 Vue 等前端框架实现，为构建现代的响应式前端提供了一种很好的方法，而无需许多JavaScript框架的复杂性、客户端渲染或构建步骤。</p>
<h2 id="数据显示" tabindex="-1"><a class="header-anchor" href="#数据显示"><span>数据显示</span></a></h2>
<p>你可以通过将变量包装在大括号中来显示传递给Blade视图的数据。例如，给定以下路由：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Route</span><span class="token operator">::</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'welcome'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'name'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Samantha'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以显示 <code v-pre>name</code> 变量的内容，如下所示：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">Hello, {{ $name }}.</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p><strong>注意</strong><br>
Blade 的 <code v-pre>{{ }}</code> echo 语句是通过 PHP 的 <code v-pre>htmlspecialchars</code> 函数自动发送的，以防止XSS攻击。</p>
</blockquote>
<p>并非只能给视图传递变量。你也可以回显任何PHP函数的结果。事实上，你可以将任何想要的PHP代码放入Blade echo 语句中：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">The current UNIX timestamp is {{ time() }}.</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="html-实体字符" tabindex="-1"><a class="header-anchor" href="#html-实体字符"><span>HTML 实体字符</span></a></h3>
<p>默认情况下，Blade（和 Laravel <code v-pre>e</code> 函数）将对HTML实体进行双重编码。如果要禁用双重编码，请从 <code v-pre>AppServiceProvider</code> 的 <code v-pre>boot</code> 方法调用 <code v-pre>Blade::withoutDoubleEncoding</code> 方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Providers</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Blade</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>ServiceProvider</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">AppServiceProvider</span> <span class="token keyword">extends</span> <span class="token class-name">ServiceProvider</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * Bootstrap any application services.</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">boot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token class-name static-context">Blade</span><span class="token operator">::</span><span class="token function">withoutDoubleEncoding</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="显示未扫描的数据" tabindex="-1"><a class="header-anchor" href="#显示未扫描的数据"><span>显示未扫描的数据</span></a></h4>
<p>默认情况下， Blade <code v-pre>{{ }}</code> 语句是通过PHP的 <code v-pre>htmlspecialchars</code> 函数自动发送的，以防止XSS攻击。如果不希望对数据进行转义，可以使用以下语法：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">Hello, {!! $name !!}.</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>[!注意]<br>
在回显应用程序用户提供的内容时要非常小心。在显示用户提供的数据时，通常应该使用转义的双大括号语法来防止XSS攻击。</p>
</blockquote>
<h3 id="blade-和-javascript-框架" tabindex="-1"><a class="header-anchor" href="#blade-和-javascript-框架"><span>Blade 和 JavaScript 框架</span></a></h3>
<p>由于许多JavaScript框架也使用「大括号」来表示给定的表达式应该显示在浏览器中，因此你可以使用 <code v-pre>@</code> 符号来通知Blade渲染引擎表达式应该保持不变。例如:</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;h1&gt;Laravel&lt;/h1&gt;</span>
<span class="line"></span>
<span class="line">Hello, @{{ name }}.</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在本例中，<code v-pre>@</code> 符号将被Blade删除；但是，<code v-pre>{{ name }}</code> 表达式将不受Blade引擎的影响，从而允许你的JavaScript框架对其进行渲染。</p>
<p><code v-pre>@</code> 符号也可用于转义Blade指令：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">{{-- Blade template --}}</span>
<span class="line">@@if()</span>
<span class="line"></span>
<span class="line">&lt;!-- HTML output --&gt;</span>
<span class="line">@if()</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="呈现json" tabindex="-1"><a class="header-anchor" href="#呈现json"><span>呈现JSON</span></a></h4>
<p>有时，你可能会将数组传递到视图，意图将其呈现为JSON，以便初始化 JavaScript 变量。例如:</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;script&gt;</span>
<span class="line">    var app = &lt;?php echo json_encode($array); ?&gt;;</span>
<span class="line">&lt;/script&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>或者，你可以使用 <code v-pre>Illuminate\Support\Js::from</code> 方法指令，而不是手动调用 <code v-pre>json_encode</code>。 <code v-pre>from</code> 方法接受与 PHP 的 <code v-pre>json_encode</code> 函数相同的参数；但是，它将确保正确转义生成的 JSON 以包含在 HTML 引号中。 <code v-pre>from</code> 方法将返回一个字符串 <code v-pre>JSON.parse</code> JavaScript 语句，它将给定对象或数组转换为有效的 JavaScript 对象：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;script&gt;</span>
<span class="line">    var app = {{ Illuminate\Support\Js::from($array) }};</span>
<span class="line">&lt;/script&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Laravel 框架的最新版本包括一个 <code v-pre>Js</code> 门面，它提供了在 Blade 模板中方便地访问此功能：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;script&gt;</span>
<span class="line">    var app = {{ Js::from($array) }};</span>
<span class="line">&lt;/script&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p><strong>注意</strong><br>
你应该仅使用 <code v-pre>Js::from</code> 方法来将现有的变量渲染为 JSON。Blade 模板是基于正则表达式的，尝试将复杂的表达式传递给指令可能会导致意外的失败。</p>
</blockquote>
<h4 id="verbatim-指令" tabindex="-1"><a class="header-anchor" href="#verbatim-指令"><span><code v-pre>@verbatim</code> 指令</span></a></h4>
<p>如果你在模板中显示很大一部分 JavaScript 变量，你可以将 HTML 嵌入到 <code v-pre>@verbatim</code> 指令中，这样，你就不需要在每一个 Blade 回显语句前添加 <code v-pre>@</code> 符号：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@verbatim</span>
<span class="line">    &lt;div class=&quot;container&quot;&gt;</span>
<span class="line">        Hello, {{ name }}.</span>
<span class="line">    &lt;/div&gt;</span>
<span class="line">@endverbatim</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="blade-指令" tabindex="-1"><a class="header-anchor" href="#blade-指令"><span>Blade 指令</span></a></h2>
<p>除了模板继承和显示数据以外， Blade 还为常见的 PHP 控制结构提供了便捷的快捷方式，例如条件语句和循环。这些快捷方式为 PHP 控制结构提供了一个非常清晰、简洁的书写方式，同时，还与 PHP 中的控制结构保持了相似的语法特性。</p>
<h3 id="if-语句" tabindex="-1"><a class="header-anchor" href="#if-语句"><span>If 语句</span></a></h3>
<p>你可以使用 <code v-pre>@if</code> ， <code v-pre>@elseif</code>， <code v-pre>@else</code> 和 <code v-pre>@endif</code> 指令构造 <code v-pre>if</code>语句。这些指令功能与它们所对应的 PHP 语句完全一致：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@if (count($records) === 1)</span>
<span class="line">    我有一条记录！</span>
<span class="line">@elseif (count($records) &gt; 1)</span>
<span class="line">    我有多条记录！</span>
<span class="line">@else</span>
<span class="line">    我没有任何记录！</span>
<span class="line">@endif</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>为了方便，Blade 还提供了 <code v-pre>@unless</code> 指令:</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@unless (Auth::check())</span>
<span class="line">    你没有登录.</span>
<span class="line">@endunless</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>除了上面所说条件指令外， <code v-pre>@isset</code> 和 <code v-pre>@empty</code> 指令亦可作为它们所对应的 PHP 函数的快捷方式:</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@isset($records)</span>
<span class="line">   // $records 已经被定义且不为 null ……</span>
<span class="line">@endisset</span>
<span class="line"></span>
<span class="line">@empty($records)</span>
<span class="line">   // $records 为「空」...</span>
<span class="line">@endempty</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="授权指令" tabindex="-1"><a class="header-anchor" href="#授权指令"><span>授权指令</span></a></h4>
<p><code v-pre>@auth</code> 和 <code v-pre>@guest</code> 指令可用于快速判断当前用户是否已经获得授权 <a href="https://learnku.com/docs/laravel/11.x/authorizationmd/16691" target="_blank" rel="noopener noreferrer">授权</a> 或是游客:</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@auth</span>
<span class="line">   // 用户已经通过认证...</span>
<span class="line">@endauth</span>
<span class="line"></span>
<span class="line">@guest</span>
<span class="line">   // 用户没有通过认证...</span>
<span class="line">@endguest</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如有需要， 你亦可在使用 <code v-pre>@auth</code> and <code v-pre>@guest</code> 指令时指定<a href="https://learnku.com/docs/laravel/11.x/authenticationmd/16690" target="_blank" rel="noopener noreferrer">认证守卫</a>:</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@auth('admin')</span>
<span class="line">    // 用户已经通过认证...</span>
<span class="line">@endauth</span>
<span class="line"></span>
<span class="line">@guest('admin')</span>
<span class="line">    // 用户没有通过认证...</span>
<span class="line">@endguest</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="环境指令" tabindex="-1"><a class="header-anchor" href="#环境指令"><span>环境指令</span></a></h4>
<p>你可以使用 <code v-pre>@production</code> 指令来判断应用是否处于生产环境:</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@production</span>
<span class="line">  // 生产环境特定内容...</span>
<span class="line">@endproduction</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>或者, 你可以使用 <code v-pre>@env</code> 指令来判断应用是否运行于指定环境:</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@env('staging')</span>
<span class="line">  // 应用运行于「staging」环境...</span>
<span class="line">@endenv</span>
<span class="line"></span>
<span class="line">@env(['staging', 'production'])</span>
<span class="line">  // 应用运行于 「staging」或 [生产] 环境...</span>
<span class="line">@endenv</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="区块指令" tabindex="-1"><a class="header-anchor" href="#区块指令"><span>区块指令</span></a></h4>
<p>你可以使用 <code v-pre>@hasSection</code> 指令来判断区块是否有内容:</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@hasSection('navigation')</span>
<span class="line">    &lt;div class=&quot;pull-right&quot;&gt;</span>
<span class="line">        @yield('navigation')</span>
<span class="line">    &lt;/div&gt;</span>
<span class="line"></span>
<span class="line">    &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;</span>
<span class="line">@endif</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以使用 <code v-pre>sectionMissing</code> 指令来判断区块是否没有内容:</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@sectionMissing('navigation')</span>
<span class="line">    &lt;div class=&quot;pull-right&quot;&gt;</span>
<span class="line">        @include('default-navigation')</span>
<span class="line">    &lt;/div&gt;</span>
<span class="line">@endif</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="会话指令" tabindex="-1"><a class="header-anchor" href="#会话指令"><span>会话指令</span></a></h4>
<p><code v-pre>@session</code> 指令可用于确定是否存在 <a href="https://learnku.com/docs/laravel/11.x/sessionmd/16667" target="_blank" rel="noopener noreferrer">会话</a> 值。如果会话值存在， <code v-pre>@session</code> and <code v-pre>@endsession</code> 指令内的模板内容将被执行。在 <code v-pre>@session</code> 指令的内容中，你可以回显 <code v-pre>$value</code> 变量的会话值:</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@session('status')</span>
<span class="line">    &lt;div class=&quot;p-4 bg-green-100&quot;&gt;</span>
<span class="line">        {{ $value }}</span>
<span class="line">    &lt;/div&gt;</span>
<span class="line">@endsession</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="switch-语句" tabindex="-1"><a class="header-anchor" href="#switch-语句"><span>Switch 语句</span></a></h3>
<p>你可以使用 <code v-pre>@switch</code>, <code v-pre>@case</code>, <code v-pre>@break</code>, <code v-pre>@default</code> 和 <code v-pre>@endswitch</code> 语句来构建 Switch 语句:</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@switch($i)</span>
<span class="line">    @case(1)</span>
<span class="line">        第一种情况...</span>
<span class="line">        @break</span>
<span class="line"></span>
<span class="line">    @case(2)</span>
<span class="line">        第二种情况...</span>
<span class="line">        @break</span>
<span class="line"></span>
<span class="line">    @default</span>
<span class="line">        默认情况...</span>
<span class="line">@endswitch</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="循环" tabindex="-1"><a class="header-anchor" href="#循环"><span>循环</span></a></h3>
<p>除了条件语句， Blade 还提供了与 PHP 循环结构功能相同的指令。同样，这些语句的功能和它们所对应的 PHP 语法一致:</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@for ($i = 0; $i &lt; 10; $i++)</span>
<span class="line">    当前的值是 {{ $i }}</span>
<span class="line">@endfor</span>
<span class="line"></span>
<span class="line">@foreach ($users as $user)</span>
<span class="line">    &lt;p&gt;这是用户 {{ $user-&gt;id }}&lt;/p&gt;</span>
<span class="line">@endforeach</span>
<span class="line"></span>
<span class="line">@forelse ($users as $user)</span>
<span class="line">    &lt;li&gt;{{ $user-&gt;name }}&lt;/li&gt;</span>
<span class="line">@empty</span>
<span class="line">    &lt;p&gt;没有用户&lt;/p&gt;</span>
<span class="line">@endforelse</span>
<span class="line"></span>
<span class="line">@while (true)</span>
<span class="line">    &lt;p&gt;我将永远循环。&lt;/p&gt;</span>
<span class="line">@endwhile</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>[技巧]<br>
在进行 <code v-pre>foreach</code> 循环时, 你可以使用 <a href="#the-loop-variable">循环变量</a> 去获取有关循环的有价值的信息，例如你是否处于循环的第一次或最后一次迭代中。</p>
</blockquote>
<p>使用循环时，还可以使用 <code v-pre>@continue</code> 和 <code v-pre>@break</code> 循环或跳过当前迭代：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@foreach ($users as $user)</span>
<span class="line">    @if ($user-&gt;type == 1)</span>
<span class="line">        @continue</span>
<span class="line">    @endif</span>
<span class="line"></span>
<span class="line">    &lt;li&gt;{{ $user-&gt;name }}&lt;/li&gt;</span>
<span class="line"></span>
<span class="line">    @if ($user-&gt;number == 5)</span>
<span class="line">        @break</span>
<span class="line">    @endif</span>
<span class="line">@endforeach</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你还可以在指令声明中包含继续或中断条件：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@foreach ($users as $user)</span>
<span class="line">    @continue($user-&gt;type == 1)</span>
<span class="line"></span>
<span class="line">    &lt;li&gt;{{ $user-&gt;name }}&lt;/li&gt;</span>
<span class="line"></span>
<span class="line">    @break($user-&gt;number == 5)</span>
<span class="line">@endforeach</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="loop-变量" tabindex="-1"><a class="header-anchor" href="#loop-变量"><span>Loop 变量</span></a></h3>
<p>在使用 <code v-pre>foreach</code> 循环迭代时，循环内部会有一个 <code v-pre>$loop</code> 变量可用。这个变量提供了对一些有用信息的访问，比如当前的循环索引以及是否是循环的第一次或最后一次迭代：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@foreach ($users as $user)</span>
<span class="line">    @if ($loop-&gt;first)</span>
<span class="line">        This is the first iteration.</span>
<span class="line">    @endif</span>
<span class="line"></span>
<span class="line">    @if ($loop-&gt;last)</span>
<span class="line">        This is the last iteration.</span>
<span class="line">    @endif</span>
<span class="line"></span>
<span class="line">    &lt;p&gt;This is user {{ $user-&gt;id }}&lt;/p&gt;</span>
<span class="line">@endforeach</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果你处于嵌套循环中，你可以使用循环的 <code v-pre>$loop</code> 变量的 <code v-pre>parent</code> 属性访问父级循环：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@foreach ($users as $user)</span>
<span class="line">    @foreach ($user-&gt;posts as $post)</span>
<span class="line">        @if ($loop-&gt;parent-&gt;first)</span>
<span class="line">            This is the first iteration of the parent loop.</span>
<span class="line">        @endif</span>
<span class="line">    @endforeach</span>
<span class="line">@endforeach</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>$loop</code> 变量还包含多种其他有用的属性：</p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>$loop-&gt;index</code></td>
<td>当前迭代的索引（从 0 开始）。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;iteration</code></td>
<td>当前循环的迭代次数（从 1 开始）。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;remaining</code></td>
<td>循环剩余的迭代次数。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;count</code></td>
<td>被迭代的数组的元素个数。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;first</code></td>
<td>当前迭代是否是循环的首次迭代。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;last</code></td>
<td>当前迭代是否是循环的末次迭代。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;even</code></td>
<td>当前迭代是否是循环的末次迭代。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;odd</code></td>
<td>当前循环的迭代次数是否是奇数。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;depth</code></td>
<td>当前循环的嵌套深度。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;parent</code></td>
<td>嵌套循环中的父级循环。</td>
</tr>
</tbody>
</table>
<h3 id="有条件地编译-class-样式" tabindex="-1"><a class="header-anchor" href="#有条件地编译-class-样式"><span>有条件地编译 class 样式</span></a></h3>
<p>该 <code v-pre>@class</code> 指令有条件地编译 CSS class 样式。该指令接收一个数组，其中数组的键包含你希望添加的一个或多个样式的类名，而值是一个布尔表达式。如果数组元素有一个数值的键，它将始终包含在呈现的 class 列表中：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@php</span>
<span class="line">    $isActive = false;</span>
<span class="line">    $hasError = true;</span>
<span class="line">@endphp</span>
<span class="line"></span>
<span class="line">&lt;span @class([</span>
<span class="line">    'p-4',</span>
<span class="line">    'font-bold' =&gt; $isActive,</span>
<span class="line">    'text-gray-500' =&gt; ! $isActive,</span>
<span class="line">    'bg-red' =&gt; $hasError,</span>
<span class="line">])&gt;&lt;/span&gt;</span>
<span class="line"></span>
<span class="line">&lt;span class=&quot;p-4 text-gray-500 bg-red&quot;&gt;&lt;/span&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>同样，<code v-pre>@style</code> 指令可用于有条件地将内联 CSS 样式添加到一个 HTML 元素中：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@php</span>
<span class="line">    $isActive = true;</span>
<span class="line">@endphp</span>
<span class="line"></span>
<span class="line">&lt;span @style([</span>
<span class="line">    'background-color: red',</span>
<span class="line">    'font-weight: bold' =&gt; $isActive,</span>
<span class="line">])&gt;&lt;/span&gt;</span>
<span class="line"></span>
<span class="line">&lt;span style=&quot;background-color: red; font-weight: bold;&quot;&gt;&lt;/span&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="附加属性" tabindex="-1"><a class="header-anchor" href="#附加属性"><span>附加属性</span></a></h3>
<p>为方便起见，你可以使用该 <code v-pre>@checked</code> 指令轻松判断给定的 HTML 复选框输入是否被「选中」。如果提供的条件判断为 <code v-pre>true</code> ，则此指令将回显 <code v-pre>checked</code>：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;input type=&quot;checkbox&quot;</span>
<span class="line">        name=&quot;active&quot;</span>
<span class="line">        value=&quot;active&quot;</span>
<span class="line">        @checked(old('active', $user-&gt;active)) /&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>同样，<code v-pre>@selected</code> 指令可用于判断给定的选项是否被「选中」：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;select name=&quot;version&quot;&gt;</span>
<span class="line">    @foreach ($product-&gt;versions as $version)</span>
<span class="line">        &lt;option value=&quot;{{ $version }}&quot; @selected(old('version') == $version)&gt;</span>
<span class="line">            {{ $version }}</span>
<span class="line">        &lt;/option&gt;</span>
<span class="line">    @endforeach</span>
<span class="line">&lt;/select&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>此外，<code v-pre>@disabled</code> 指令可用于判断给定元素是否为「禁用」：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;button type=&quot;submit&quot; @disabled($errors-&gt;isNotEmpty())&gt;Submit&lt;/button&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>此外，<code v-pre>@readonly</code> 指令可以用来指示某个元素是否应该是「只读」：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;input type=&quot;email&quot;</span>
<span class="line">        name=&quot;email&quot;</span>
<span class="line">        value=&quot;email@laravel.com&quot;</span>
<span class="line">        @readonly($user-&gt;isNotAdmin()) /&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>另外，<code v-pre>@required</code> 指令可以用来指示一个给定的元素是否应该是「必需的」：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;input type=&quot;text&quot;</span>
<span class="line">        name=&quot;title&quot;</span>
<span class="line">        value=&quot;title&quot;</span>
<span class="line">        @required($user-&gt;isAdmin()) /&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="包含子视图" tabindex="-1"><a class="header-anchor" href="#包含子视图"><span>包含子视图</span></a></h3>
<blockquote>
<p><strong>技巧</strong><br>
虽然你可以自由使用该 <code v-pre>@include</code> 指令，但是 Blade <a href="#components">组件</a> 提供了类似的功能，并提供了优于该 <code v-pre>@include</code> 指令的功能，如数据和属性绑定。</p>
</blockquote>
<p>Blade 的 <code v-pre>@include</code> 指令允许你从一个视图中包含另外一个 Blade 视图。父视图中的所有变量在子视图中都可以使用：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;div&gt;</span>
<span class="line">    @include('shared.errors')</span>
<span class="line"></span>
<span class="line">    &lt;form&gt;</span>
<span class="line">        &lt;!-- Form Contents --&gt;</span>
<span class="line">    &lt;/form&gt;</span>
<span class="line">&lt;/div&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>尽管子视图可以继承父视图中所有可以使用的数据，但是你也可以传递一个额外的数组，这个数组在子视图中也可以使用：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@include('view.name', ['status' =&gt; 'complete'])</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>如果你想要使用 <code v-pre>@include</code> 包含一个不存在的视图，Laravel 将会抛出一个错误。如果你想要包含一个可能存在也可能不存在的视图，那么你应该使用 <code v-pre>@includeIf</code> 指令:</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@includeIf('view.name', ['status' =&gt; 'complete'])</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>如果你希望根据某个布尔表达式的结果为 <code v-pre>true</code> 或 <code v-pre>false</code> 时有条件地 <code v-pre>@include</code> 一个视图，你可以使用 <code v-pre>@includeWhen</code> 和<br>
<code v-pre>@includeUnless</code> 指令：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@includeWhen($boolean, 'view.name', ['status' =&gt; 'complete'])</span>
<span class="line"></span>
<span class="line">@includeUnless($boolean, 'view.name', ['status' =&gt; 'complete'])</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>要从给定的视图数组中引入第一个存在的视图，你可以使用 <code v-pre>includeFirst</code> 指令：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@includeFirst(['custom.admin', 'admin'], ['status' =&gt; 'complete'])</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p><strong>注意</strong><br>
在视图中，你应该避免使用 <code v-pre>__DIR__</code> 和 <code v-pre>__FILE__</code> 这些常量，因为它们将引用已缓存的和已编译的视图。</p>
</blockquote>
<h4 id="为集合渲染视图" tabindex="-1"><a class="header-anchor" href="#为集合渲染视图"><span>为集合渲染视图</span></a></h4>
<p>你可以使用 Blade 的 @each 指令将循环合并在一行内：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@each('view.name', $jobs, 'job')</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>@each</code> 指令的第一个参数是为数组或集合中的每个元素渲染的视图。第二个参数是你想要迭代的数组或集合，而第三个参数是将被赋值给视图中当前迭代的变量名。例如，如果你正在迭代一个 <code v-pre>jobs</code> 数组，通常你会希望在视图中将每个工作作为 <code v-pre>job</code> 变量访问。当前迭代的数组键将作为 <code v-pre>key</code> 变量在视图中可用。</p>
<p>你也可以向 <code v-pre>@each</code> 指令传递第四个参数。这个参数决定了如果给定的数组为空时将渲染的视图。</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@each('view.name', $jobs, 'job', 'view.empty')</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p><strong>注意</strong><br>
通过 <code v-pre>@each</code> 指令渲染的视图不会继承父视图的变量。如果子视图需要使用这些变量，你可以使用 <code v-pre>@foreach</code> 和 <code v-pre>@include</code> 来代替它。</p>
</blockquote>
<h3 id="once-指令" tabindex="-1"><a class="header-anchor" href="#once-指令"><span><code v-pre>@once</code> 指令</span></a></h3>
<p><code v-pre>@once</code> 指令允许你定义模板的一部分，这部分内容在每次渲染周期中只被计算一次。这在使用<a href="#stacks">堆栈</a>将特定的 JavaScript 推送到页面头部时会很有用。例如，如果你在一个循环中渲染一个给定的<a href="#components">组件</a>，你可能希望只在组件首次渲染时将 JavaScript 推送到头部：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@once</span>
<span class="line">    @push('scripts')</span>
<span class="line">        &lt;script&gt;</span>
<span class="line">            // Your custom JavaScript...</span>
<span class="line">        &lt;/script&gt;</span>
<span class="line">    @endpush</span>
<span class="line">@endonce</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>由于 <code v-pre>@once</code> 指令通常与 <code v-pre>@push</code> 或 <code v-pre>@prepend</code> 指令一起使用，因此 <code v-pre>@pushOnce</code> 和 <code v-pre>@prependOnce</code> 指令方便您使用：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@pushOnce('scripts')</span>
<span class="line">    &lt;script&gt;</span>
<span class="line">        // 你的自定义 JavaScript...</span>
<span class="line">    &lt;/script&gt;</span>
<span class="line">@endPushOnce</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="原生-php" tabindex="-1"><a class="header-anchor" href="#原生-php"><span>原生 PHP</span></a></h3>
<p>在某些情况下，将 PHP 代码嵌入到视图中是有用的。你可以使用 Blade 的 <code v-pre>@php</code> 指令在模板中执行一块纯 PHP：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@php</span>
<span class="line">    $counter = 1;</span>
<span class="line">@endphp</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>或者，如果你只需要使用 PHP 导入一个类，你可以使用 <code v-pre>@use</code> 指令：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@use('App\Models\Flight')</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>第二个参数可以提供给 <code v-pre>@use</code> 指令用于为导入的类取别名：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token keyword">use</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'App\Models\Flight'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'FlightModel'</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="注释" tabindex="-1"><a class="header-anchor" href="#注释"><span>注释</span></a></h3>
<p>Blade 还允许你在视图中定义注释。然而，与 HTML 注释不同，Blade 注释不包含在应用程序返回的 HTML 中：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">{{-- 这个注释不会出现在渲染的 HTML 中 --}}</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="组件" tabindex="-1"><a class="header-anchor" href="#组件"><span>组件</span></a></h2>
<p>组件和插槽提供了与节、布局和包含类似的好处；但是，一些人可能会发现组件和插槽的心智模型更容易理解。编写组件有两种方法：基于类的组件和匿名组件。</p>
<p>要创建一个基于类的组件，你可以使用 <code v-pre>make:component</code> Artisan 命令。为了说明如何使用组件，我们将创建一个简单的 <code v-pre>Alert</code> 组件。<code v-pre>make:component</code> 命令将把组件放在 <code v-pre>app/View/Components</code> 目录中：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan make:component Alert</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>make:component</code> 命令还会为组件创建一个视图模板。视图将被放置在 <code v-pre>resources/views/components</code> 目录中。编写自己应用程序的组件时，组件通常会在 <code v-pre>app/View/Components</code> 目录和 <code v-pre>resources/views/components</code> 目录中自动发现，所以通常不需要进一步的组件注册。</p>
<p>你还可以在子目录中创建组件：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan make:component Forms/Input</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>上面的命令将在 <code v-pre>app/View/Components/Forms</code> 目录中创建一个 <code v-pre>Input</code> 组件，并将视图放置在 <code v-pre>resources/views/components/forms</code> 目录中。</p>
<p>如果你想创建一个匿名组件（只有一个 Blade 模板且没有类的组件），你可以在调用 <code v-pre>make:component</code> 命令时使用 <code v-pre>--view</code> 选项：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan make:component forms.input <span class="token parameter variable">--view</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>上面的命令将在 <code v-pre>resources/views/components/forms/input.blade.php</code> 创建一个 Blade 文件，可以通过 <code v-pre>&lt;x-forms.input /&gt;</code> 渲染为组件。</p>
<h4 id="手动注册包组件" tabindex="-1"><a class="header-anchor" href="#手动注册包组件"><span>手动注册包组件</span></a></h4>
<p>编写自己的应用程序组件时，组件通常会在 <code v-pre>app/View/Components</code> 目录和 <code v-pre>resources/views/components</code> 目录中自动发现。</p>
<p>但是，如果你正在构建一个使用 Blade 组件的包，你将需要手动注册你的组件类及其 HTML 标签别名。你通常应该在包的服务提供者的 <code v-pre>boot</code> 方法中注册你的组件：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Blade</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 引导包的服务。</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">boot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token class-name static-context">Blade</span><span class="token operator">::</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'package-alert'</span><span class="token punctuation">,</span> <span class="token class-name static-context">Alert</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>一旦你的组件注册后，它可以使用其标签别名进行渲染：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-package-alert/&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>或者，你可以使用 <code v-pre>componentNamespace</code> 方法按照约定自动加载组件类。例如，<code v-pre>Nightshade</code> 包可能有 <code v-pre>Calendar</code> 和 <code v-pre>ColorPicker</code> 组件，它们位于 <code v-pre>Package\Views\Components</code> 命名空间下：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Blade</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 引导包的服务。</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">boot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token class-name static-context">Blade</span><span class="token operator">::</span><span class="token function">componentNamespace</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Nightshade\\Views\\Components'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'nightshade'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这将允许使用包组件，并通过 <code v-pre>package-name::</code> 语法指明它们的供应商命名空间：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-nightshade::calendar /&gt;</span>
<span class="line">&lt;x-nightshade::color-picker /&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>Blade 将通过对组件名称进行帕斯卡式命名法（Pascal case）自动检测与该组件相关联的类。子目录也通过 <code v-pre>.</code> 表示法支持。</p>
<h3 id="渲染组件" tabindex="-1"><a class="header-anchor" href="#渲染组件"><span>渲染组件</span></a></h3>
<p>要显示组件，你可以在你的 Blade 模板中使用 Blade 组件标签。Blade 组件标签以字符串 <code v-pre>x-</code> 开头，后跟组件类的 <code v-pre>kebab-case</code> 名称：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-alert/&gt;</span>
<span class="line"></span>
<span class="line">&lt;x-user-profile/&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果组件类在 <code v-pre>app/View/Components</code> 目录下的更深层，则可以使用 <code v-pre>.</code> 字符来表示目录嵌套。例如，假设组件位于 <code v-pre>app/View/Components/Inputs/Button.php</code>，我们可以这样渲染它：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-inputs.button/&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>如果你想有条件地渲染你的组件，你可以在你的组件类上定义一个 <code v-pre>shouldRender</code> 方法。如果 <code v-pre>shouldRender</code> 方法返回 <code v-pre>false</code>，则不会渲染该组件：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Str</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 该组件是否应该被渲染</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">shouldRender</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">bool</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">Str</span><span class="token operator">::</span><span class="token function">length</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">message</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="向组件传递数据" tabindex="-1"><a class="header-anchor" href="#向组件传递数据"><span>向组件传递数据</span></a></h3>
<p>你可以使用 HTML 属性向 Blade 组件传递数据。可以使用简单的 HTML 属性字符串将硬编码的原始值传递给组件。应该通过使用 <code v-pre>:</code> 字符为前缀的属性向组件传递 PHP 表达式和变量：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-alert type=&quot;error&quot; :message=&quot;$message&quot;/&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你应该在组件的类构造函数中定义所有的组件数据属性。组件上的所有公共属性将自动提供给组件的视图。从组件的 <code v-pre>render</code> 方法传递数据到视图是没有必要的：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>View<span class="token punctuation">\</span>Components</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>View<span class="token punctuation">\</span>Component</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>View<span class="token punctuation">\</span>View</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Alert</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 创建组件实例。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">__construct</span><span class="token punctuation">(</span></span>
<span class="line">        <span class="token keyword">public</span> <span class="token keyword type-declaration">string</span> <span class="token variable">$type</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token keyword">public</span> <span class="token keyword type-declaration">string</span> <span class="token variable">$message</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 获取表示组件的视图/内容。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token class-name return-type">View</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'components.alert'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当你的组件被渲染时，你可以通过名称回显你的组件的公共变量的内容：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;div class=&quot;alert alert-{{ $type }}&quot;&gt;</span>
<span class="line">    {{ $message }}</span>
<span class="line">&lt;/div&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="命名约定" tabindex="-1"><a class="header-anchor" href="#命名约定"><span>命名约定</span></a></h4>
<p>组件构造函数的参数应该使用 <code v-pre>camelCase</code> 指定，而在 HTML 属性中引用参数名称时应该使用 <code v-pre>kebab-case</code>。例如，给定以下组件构造函数：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 创建组件实例。</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">__construct</span><span class="token punctuation">(</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword type-declaration">string</span> <span class="token variable">$alertType</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>$alertType</code> 参数可以这样提供给组件：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-alert alert-type=&quot;danger&quot; /&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="短属性语法" tabindex="-1"><a class="header-anchor" href="#短属性语法"><span>短属性语法</span></a></h4>
<p>传递属性给组件时，你还可以使用「短属性」语法。这经常很方便，因为属性名称经常与它们对应的变量名称匹配：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">{{-- 短属性语法... --}}</span>
<span class="line">&lt;x-profile :$userId :$name /&gt;</span>
<span class="line"></span>
<span class="line">{{-- 等同于... --}}</span>
<span class="line">&lt;x-profile :user-id=&quot;$userId&quot; :name=&quot;$name&quot; /&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="转义属性渲染" tabindex="-1"><a class="header-anchor" href="#转义属性渲染"><span>转义属性渲染</span></a></h4>
<p>因为一些 JavaScript 框架（如 Alpine.js）也使用前缀为冒号的属性，你可以使用双冒号（<code v-pre>::</code>）前缀来告知 Blade 该属性不是 PHP 表达式。例如，给定以下组件：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-button ::class=&quot;{ danger: isDeleting }&quot;&gt;</span>
<span class="line">    提交</span>
<span class="line">&lt;/x-button&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Blade 将渲染以下 HTML：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;button :class=&quot;{ danger: isDeleting }&quot;&gt;</span>
<span class="line">    提交</span>
<span class="line">&lt;/button&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="组件方法" tabindex="-1"><a class="header-anchor" href="#组件方法"><span>组件方法</span></a></h4>
<p>除了公共变量可用于你的组件模板外，组件上的任何公共方法也可以被调用。例如，想象一个具有 <code v-pre>isSelected</code> 方法的组件：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 判断给定的选项是否是当前选中的选项。</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">isSelected</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$option</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">bool</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token variable">$option</span> <span class="token operator">===</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">selected</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以通过调用与方法名称匹配的变量，在你的组件模板中执行该方法：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;option {{ $isSelected($value) ? 'selected' : '' }} value=&quot;{{ $value }}&quot;&gt;</span>
<span class="line">    {{ $label }}</span>
<span class="line">&lt;/option&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="在组件类中访问属性和插槽" tabindex="-1"><a class="header-anchor" href="#在组件类中访问属性和插槽"><span>在组件类中访问属性和插槽</span></a></h4>
<p>Blade 组件还允许你在类的 <code v-pre>render</code> 方法中访问组件名，属性和插槽。然而，为了访问这些数据，你应该从组件的 <code v-pre>render</code> 方法返回一个闭包。闭包将接收一个 <code v-pre>$data</code> 数组作为其唯一参数。此数组将包含几个元素，提供有关组件的信息：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Closure</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 获取表示组件的视图/内容。</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token class-name return-type">Closure</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// $data['componentName'];</span></span>
<span class="line">        <span class="token comment">// $data['attributes'];</span></span>
<span class="line">        <span class="token comment">// $data['slot'];</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token string single-quoted-string">'&lt;div>组件内容&lt;/div>'</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>componentName</code> 等于 HTML 标签中的 <code v-pre>x-</code> 前缀后的名称。所以 <code v-pre>&lt;x-alert /&gt;</code> 的 <code v-pre>componentName</code> 将是 <code v-pre>alert</code>。<code v-pre>attributes</code> 元素将包含 HTML 标签上存在的所有属性。<code v-pre>slot</code> 元素是一个 <code v-pre>Illuminate\Support\HtmlString</code> 实例，它包含组件插槽的内容。</p>
<p>闭包应该返回一个字符串。如果返回的字符串对应于一个现有的视图，该视图将被渲染；否则，返回的字符串将被视为内联 Blade 视图进行求值。</p>
<h4 id="额外的依赖项" tabindex="-1"><a class="header-anchor" href="#额外的依赖项"><span>额外的依赖项</span></a></h4>
<p>如果你的组件需要来自 Laravel <a href="https://learnku.com/docs/laravel/11.x/container" target="_blank" rel="noopener noreferrer">服务容器</a>的依赖项，你可以在组件的数据属性之前列出它们，它们将自动被容器注入：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Services<span class="token punctuation">\</span>AlertCreator</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 创建组件实例。</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">__construct</span><span class="token punctuation">(</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token class-name type-declaration">AlertCreator</span> <span class="token variable">$creator</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword type-declaration">string</span> <span class="token variable">$type</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword type-declaration">string</span> <span class="token variable">$message</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="隐藏属性-方法" tabindex="-1"><a class="header-anchor" href="#隐藏属性-方法"><span>隐藏属性/方法</span></a></h4>
<p>如果你想防止某些公共方法或属性作为变量暴露给你的组件模板，你可以将它们添加到组件上的 <code v-pre>$except</code> 数组属性中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>View<span class="token punctuation">\</span>Components</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>View<span class="token punctuation">\</span>Component</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Alert</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 不应该暴露给组件模板的属性/方法。</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@var</span> <span class="token class-name"><span class="token keyword">array</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$except</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'type'</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 创建组件实例。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">__construct</span><span class="token punctuation">(</span></span>
<span class="line">        <span class="token keyword">public</span> <span class="token keyword type-declaration">string</span> <span class="token variable">$type</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="组件属性" tabindex="-1"><a class="header-anchor" href="#组件属性"><span>组件属性</span></a></h3>
<p>我们已经研究了如何向组件传递数据属性；然而，有时你可能需要指定额外的 HTML 属性，例如 <code v-pre>class</code>，这些属性不是组件运行所需的数据的一部分。通常，你希望将这些额外的属性传递给组件模板的根元素。例如，假设我们想这样渲染一个 <code v-pre>alert</code> 组件：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-alert type=&quot;error&quot; :message=&quot;$message&quot; class=&quot;mt-4&quot;/&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>所有不是组件构造函数的一部分的属性将自动添加到组件的「属性包」中。这个属性包会自动通过 <code v-pre>$attributes</code> 变量提供给组件。可以通过回显这个变量，在组件内渲染所有的属性：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;div {{ $attributes }}&gt;</span>
<span class="line">    &lt;!-- 组件内容 --&gt;</span>
<span class="line">&lt;/div&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p><strong>警告</strong><br>
目前不支持在组件标签内使用如 <code v-pre>@env</code> 这样的指令。例如，<code v-pre>&lt;x-alert :live=&quot;@env('production')&quot;/&gt;</code> 将不会被编译。</p>
</blockquote>
<h4 id="默认-合并属性" tabindex="-1"><a class="header-anchor" href="#默认-合并属性"><span>默认/合并属性</span></a></h4>
<p>有时你可能需要为属性指定默认值，或者将额外的值合并到组件的某些属性中。为此，你可以使用属性包的 <code v-pre>merge</code> 方法。这个方法对于定义一组应该始终应用于组件的默认 CSS 类特别有用：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;div {{ $attributes-&gt;merge(['class' =&gt; 'alert alert-'.$type]) }}&gt;</span>
<span class="line">    {{ $message }}</span>
<span class="line">&lt;/div&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果我们假设这个组件被这样使用：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-alert type=&quot;error&quot; :message=&quot;$message&quot; class=&quot;mb-4&quot;/&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>组件的最终，渲染的 HTML 将如下所示：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;div class=&quot;mb-4 alert alert-error&quot;&gt;</span>
<span class="line">    &lt;!-- $message 变量的内容 --&gt;</span>
<span class="line">&lt;/div&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="条件合并类" tabindex="-1"><a class="header-anchor" href="#条件合并类"><span>条件合并类</span></a></h4>
<p>有时你可能希望合并类，如果给定条件为 <code v-pre>true</code>。你可以通过 <code v-pre>class</code> 方法实现这一目标，该方法接受一个类数组，其中数组键包含你希望添加的类，而值是一个布尔表达式。如果数组元素具有数字键，它将始终包含在渲染的类列表中：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;div {{ $attributes-&gt;class(['p-4', 'bg-red' =&gt; $hasError]) }}&gt;</span>
<span class="line">    {{ $message }}</span>
<span class="line">&lt;/div&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果你需要将其他属性合并到你的组件上，你可以在 <code v-pre>class</code> 方法上链接 <code v-pre>merge</code> 方法：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;button {{ $attributes-&gt;class(['p-4'])-&gt;merge(['type' =&gt; 'button']) }}&gt;</span>
<span class="line">    {{ $slot }}</span>
<span class="line">&lt;/button&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p><strong>注意</strong><br>
如果你需要在其他不应接收合并属性的 HTML 元素上有条件地编译类，你可以使用 <a href="#conditional-classes"><code v-pre>@class</code> 指令</a>.</p>
</blockquote>
<h4 id="非类属性合并" tabindex="-1"><a class="header-anchor" href="#非类属性合并"><span>非类属性合并</span></a></h4>
<p>合并不是 <code v-pre>class</code> 属性的属性时，提供给 <code v-pre>merge</code> 方法的值将被视为属性的「默认」值。然而，与 <code v-pre>class</code> 属性不同，这些属性不会与注入的属性值合并。相反，它们将被覆盖。例如，<code v-pre>button</code> 组件的实现可能如下所示：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;button {{ $attributes-&gt;merge(['type' =&gt; 'button']) }}&gt;</span>
<span class="line">    {{ $slot }}</span>
<span class="line">&lt;/button&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>要用自定义的 <code v-pre>type</code> 渲染按钮组件，可以在使用组件时指定它。如果没有指定类型，则将使用 <code v-pre>button</code> 类型：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-button type=&quot;submit&quot;&gt;</span>
<span class="line">    提交</span>
<span class="line">&lt;/x-button&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在这个例子中，<code v-pre>button</code> 组件渲染的 HTML 会是：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;button type=&quot;submit&quot;&gt;</span>
<span class="line">    提交</span>
<span class="line">&lt;/button&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果你希望 <code v-pre>class</code> 之外的其他属性将其默认值和注入的值连接在一起，你可以使用 <code v-pre>prepends</code> 方法。在这个例子中，<code v-pre>data-controller</code> 属性将始终以 <code v-pre>profile-controller</code> 开头，并且任何额外注入的 <code v-pre>data-controller</code> 值将放在这个默认值之后：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;div {{ $attributes-&gt;merge(['data-controller' =&gt; $attributes-&gt;prepends('profile-controller')]) }}&gt;</span>
<span class="line">    {{ $slot }}</span>
<span class="line">&lt;/div&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="检索和过滤属性" tabindex="-1"><a class="header-anchor" href="#检索和过滤属性"><span>检索和过滤属性</span></a></h4>
<p>你可以使用 <code v-pre>filter</code> 方法过滤属性。此方法接受一个闭包应该返回 <code v-pre>true</code> 如果你希望保留在属性包中的属性：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">{{ $attributes-&gt;filter(fn (string $value, string $key) =&gt; $key == 'foo') }}</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>为了方便起见，你可以使用 <code v-pre>whereStartsWith</code> 方法来检索所有键以给定字符串开头的属性：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">{{ $attributes-&gt;whereStartsWith('wire:model') }}</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>相反，<code v-pre>whereDoesntStartWith</code> 方法可以用来排除所有键以给定字符串开头的属性：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">{{ $attributes-&gt;whereDoesntStartWith('wire:model') }}</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>使用 <code v-pre>first</code> 方法，你可以渲染给定属性包中的第一个属性：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">{{ $attributes-&gt;whereStartsWith('wire:model')-&gt;first() }}</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>如果你想检查组件上是否存在属性，可以使用 <code v-pre>has</code> 方法。该方法接受属性名称作为唯一参数，并返回一个布尔值，指示属性是否存在：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@if ($attributes-&gt;has('class'))</span>
<span class="line">    &lt;div&gt;Class 属性存在&lt;/div&gt;</span>
<span class="line">@endif</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果数组被传递给 <code v-pre>has</code> 方法，该方法将确定是否所有给定的属性都存在于组件上：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@if ($attributes-&gt;has(['name', 'class']))</span>
<span class="line">    &lt;div&gt;所有属性都存在&lt;/div&gt;</span>
<span class="line">@endif</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>hasAny</code> 方法可以用来确定是否任何给定的属性存在于组件上：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@if ($attributes-&gt;hasAny(['href', ':href', 'v-bind:href']))</span>
<span class="line">    &lt;div&gt;其中一个属性存在&lt;/div&gt;</span>
<span class="line">@endif</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以使用 <code v-pre>get</code> 方法检索特定属性的值：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">{{ $attributes-&gt;get('class') }}</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="保留关键字" tabindex="-1"><a class="header-anchor" href="#保留关键字"><span>保留关键字</span></a></h3>
<p>默认情况下，一些关键字为 Blade 内部使用保留，以便渲染组件。以下关键字不能在你的组件中定义为公共属性或方法名称：</p>
<ul>
<li><code v-pre>data</code></li>
<li><code v-pre>render</code></li>
<li><code v-pre>resolveView</code></li>
<li><code v-pre>shouldRender</code></li>
<li><code v-pre>view</code></li>
<li><code v-pre>withAttributes</code></li>
<li><code v-pre>withName</code></li>
</ul>
<h3 id="插槽" tabindex="-1"><a class="header-anchor" href="#插槽"><span>插槽</span></a></h3>
<p>在使用组件时，你经常需要通过「插槽」传递额外的内容。组件插槽通过回显 <code v-pre>$slot</code> 变量来渲染。为了探索这个概念，让我们假设 <code v-pre>alert</code> 组件具有以下标记：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;!-- /resources/views/components/alert.blade.php --&gt;</span>
<span class="line"></span>
<span class="line">&lt;div class=&quot;alert alert-danger&quot;&gt;</span>
<span class="line">    {{ $slot }}</span>
<span class="line">&lt;/div&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>我们可以通过向组件注入内容来向 <code v-pre>slot</code> 传递内容：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-alert&gt;</span>
<span class="line">    &lt;strong&gt;哎呀！&lt;/strong&gt; 出问题了！</span>
<span class="line">&lt;/x-alert&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>有时，组件可能需要在组件内的不同位置渲染多个不同的插槽。让我们修改我们的警告组件，以允许注入一个 <code v-pre>title</code> 插槽：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;!-- /resources/views/components/alert.blade.php --&gt;</span>
<span class="line"></span>
<span class="line">&lt;span class=&quot;alert-title&quot;&gt;{{ $title }}&lt;/span&gt;</span>
<span class="line"></span>
<span class="line">&lt;div class=&quot;alert alert-danger&quot;&gt;</span>
<span class="line">    {{ $slot }}</span>
<span class="line">&lt;/div&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以使用 <code v-pre>x-slot</code> 标签定义命名插槽的内容。任何没有明确放在 <code v-pre>x-slot</code> 标签内的内容都将通过 <code v-pre>$slot</code> 变量传递给组件：</p>
<div class="language-xml line-numbers-mode" data-highlighter="prismjs" data-ext="xml" data-title="xml"><pre v-pre class="language-xml"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>x-alert</span><span class="token punctuation">></span></span></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token namespace">x-slot:</span>title</span><span class="token punctuation">></span></span></span>
<span class="line">        服务器错误</span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>x-slot</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">></span></span>哎呀！<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span> 出问题了！</span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>x-alert</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以调用插槽的 <code v-pre>isEmpty</code> 方法来确定插槽是否包含内容：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;span class=&quot;alert-title&quot;&gt;{{ $title }}&lt;/span&gt;</span>
<span class="line"></span>
<span class="line">&lt;div class=&quot;alert alert-danger&quot;&gt;</span>
<span class="line">    @if ($slot-&gt;isEmpty())</span>
<span class="line">        如果插槽为空，则这是默认内容。</span>
<span class="line">    @else</span>
<span class="line">        {{ $slot }}</span>
<span class="line">    @endif</span>
<span class="line">&lt;/div&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>此外，<code v-pre>hasActualContent</code> 方法可用于确定插槽是否包含除 HTML 注释外的任何“实际”内容：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@if ($slot-&gt;hasActualContent())</span>
<span class="line">    插槽含有非注释内容。</span>
<span class="line">@endif</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="有作用域的插槽" tabindex="-1"><a class="header-anchor" href="#有作用域的插槽"><span>有作用域的插槽</span></a></h4>
<p>如果你使用过 Vue 这样的 JavaScript 框架，你可能熟悉「有作用域的插槽」，它允许你在插槽中访问组件的数据或方法。你可以通过在你的组件上定义公共方法或属性，并通过 <code v-pre>$component</code> 变量在你的插槽中访问组件，来实现类似的行为。在这个例子中，我们将假设 <code v-pre>x-alert</code> 组件的组件类上定义了一个公共的 <code v-pre>formatAlert</code> 方法：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-alert&gt;</span>
<span class="line">    &lt;x-slot:title&gt;</span>
<span class="line">        {{ $component-&gt;formatAlert('服务器错误') }}</span>
<span class="line">    &lt;/x-slot&gt;</span>
<span class="line"></span>
<span class="line">    &lt;strong&gt;哎呀！&lt;/strong&gt; 出问题了！</span>
<span class="line">&lt;/x-alert&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="插槽属性" tabindex="-1"><a class="header-anchor" href="#插槽属性"><span>插槽属性</span></a></h4>
<p>与 Blade 组件类似，你可以为插槽分配额外的<a href="#component-attributes">属性</a>，如 CSS 类名：</p>
<div class="language-xml line-numbers-mode" data-highlighter="prismjs" data-ext="xml" data-title="xml"><pre v-pre class="language-xml"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>x-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shadow-sm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token namespace">x-slot:</span>heading</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font-bold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line">        标题</span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>x-slot</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line">    内容</span>
<span class="line"></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token namespace">x-slot:</span>footer</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text-sm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line">        页脚</span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>x-slot</span><span class="token punctuation">></span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>x-card</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>要与插槽属性进行交互，你可以访问插槽变量的 <code v-pre>attributes</code> 属性。有关如何与属性交互的更多信息，请参阅<a href="#component-attributes">组件属性</a>的文档：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@props([</span>
<span class="line">    'heading',</span>
<span class="line">    'footer',</span>
<span class="line">])</span>
<span class="line"></span>
<span class="line">&lt;div {{ $attributes-&gt;class(['border']) }}&gt;</span>
<span class="line">    &lt;h1 {{ $heading-&gt;attributes-&gt;class(['text-lg']) }}&gt;</span>
<span class="line">        {{ $heading }}</span>
<span class="line">    &lt;/h1&gt;</span>
<span class="line"></span>
<span class="line">    {{ $slot }}</span>
<span class="line"></span>
<span class="line">    &lt;footer {{ $footer-&gt;attributes-&gt;class(['text-gray-700']) }}&gt;</span>
<span class="line">        {{ $footer }}</span>
<span class="line">    &lt;/footer&gt;</span>
<span class="line">&lt;/div&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="内联组件视图" tabindex="-1"><a class="header-anchor" href="#内联组件视图"><span>内联组件视图</span></a></h3>
<p>对于非常小的组件，管理组件类和组件的视图模板可能会感觉繁琐。因此，你可以直接从 <code v-pre>render</code> 方法返回组件的标记：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 获取代表组件的视图/内容。</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">string</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token string single-quoted-string">'blade'</span></span>
<span class="line">        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"alert alert-danger"</span><span class="token operator">></span></span>
<span class="line">            <span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">$slot</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="line">        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line">    blade<span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="生成内联视图组件" tabindex="-1"><a class="header-anchor" href="#生成内联视图组件"><span>生成内联视图组件</span></a></h4>
<p>要创建一个渲染内联视图的组件，你可以在执行 <code v-pre>make:component</code> 命令时使用 <code v-pre>inline</code> 选项：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan make:component Alert <span class="token parameter variable">--inline</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="动态组件" tabindex="-1"><a class="header-anchor" href="#动态组件"><span>动态组件</span></a></h3>
<p>有时你可能需要渲染一个组件，但直到运行时才知道应该渲染哪个组件。在这种情况下，你可以使用 Laravel 内置的 <code v-pre>dynamic-component</code> 组件根据运行时值或变量渲染组件：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">// $componentName = &quot;secondary-button&quot;;</span>
<span class="line"></span>
<span class="line">&lt;x-dynamic-component :component=&quot;$componentName&quot; class=&quot;mt-4&quot; /&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="手动注册组件" tabindex="-1"><a class="header-anchor" href="#手动注册组件"><span>手动注册组件</span></a></h3>
<blockquote>
<p>[!WARNING]<br>
关于手动注册组件的以下文档主要适用于那些编写包含视图组件的 Laravel 扩展包的开发者。如果你没有编写扩展包，这部分组件文档可能与你无关。</p>
</blockquote>
<p>当为你自己的应用编写组件时，组件会自动在 <code v-pre>app/View/Components</code> 目录和 <code v-pre>resources/views/components</code> 目录中被发现。</p>
<p>然而，如果你正在构建一个使用 Blade 组件的扩展包，或者将组件放置在非常规目录中，你将需要手动注册你的组件类和其 HTML 标签别名，以便 Laravel 知道在哪里可以找到该组件。你通常应该在扩展包的服务提供者的 <code v-pre>boot</code> 方法中注册你的组件：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Blade</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">VendorPackage<span class="token punctuation">\</span>View<span class="token punctuation">\</span>Components<span class="token punctuation">\</span>AlertComponent</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 启动你的扩展包的服务。</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">boot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token class-name static-context">Blade</span><span class="token operator">::</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'package-alert'</span><span class="token punctuation">,</span> <span class="token class-name static-context">AlertComponent</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>一旦你的组件被注册后，可以使用其标签别名来渲染它：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-package-alert/&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="自动加载扩展包组件" tabindex="-1"><a class="header-anchor" href="#自动加载扩展包组件"><span>自动加载扩展包组件</span></a></h4>
<p>另外，你可以使用 <code v-pre>componentNamespace</code> 方法按照约定自动加载组件类。例如，一个名为 <code v-pre>Nightshade</code> 的扩展包可能有 <code v-pre>Calendar</code> 和 <code v-pre>ColorPicker</code> 组件，它们位于 <code v-pre>Package\Views\Components</code> 命名空间中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Blade</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 启动你的扩展包的服务。</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">boot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token class-name static-context">Blade</span><span class="token operator">::</span><span class="token function">componentNamespace</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Nightshade\\Views\\Components'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'nightshade'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这将允许使用 <code v-pre>package-name::</code> 语法通过其供应商命名空间使用扩展包组件：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-nightshade::calendar /&gt;</span>
<span class="line">&lt;x-nightshade::color-picker /&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>Blade 会自动检测与此组件链接的类，通过帕斯卡命名法（pascal-casing）处理组件名称。也支持使用“点”表示法的子目录。</p>
<h2 id="匿名组件" tabindex="-1"><a class="header-anchor" href="#匿名组件"><span>匿名组件</span></a></h2>
<p>类似于内联组件，匿名组件提供了一种通过单个文件管理组件的机制。然而，匿名组件使用单个视图文件且不关联任何类。要定义一个匿名组件，你只需将一个 Blade 模板放置在你的 <code v-pre>resources/views/components</code> 目录下。例如，假设你在 <code v-pre>resources/views/components/alert.blade.php</code> 定义了一个组件，你可以简单地这样渲染它：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-alert/&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你可以使用 <code v-pre>.</code> 字符来表示组件是否嵌套在 <code v-pre>components</code> 目录的更深层。例如，假设组件定义在 <code v-pre>resources/views/components/inputs/button.blade.php</code>，你可以这样渲染它：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-inputs.button/&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="匿名索引组件" tabindex="-1"><a class="header-anchor" href="#匿名索引组件"><span>匿名索引组件</span></a></h3>
<p>有时，当一个组件由许多 Blade 模板组成时，你可能希望将给定组件的模板组合在一个单独的目录中。例如，设想一个“手风琴”组件，其目录结构如下：</p>
<div class="language-none line-numbers-mode" data-highlighter="prismjs" data-ext="none" data-title="none"><pre v-pre class="language-none"><code><span class="line">/resources/views/components/accordion.blade.php</span>
<span class="line">/resources/views/components/accordion/item.blade.php</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>这个目录结构允许你这样渲染手风琴组件及其项目：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-accordion&gt;</span>
<span class="line">    &lt;x-accordion.item&gt;</span>
<span class="line">        ...</span>
<span class="line">    &lt;/x-accordion.item&gt;</span>
<span class="line">&lt;/x-accordion&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然而，为了通过 <code v-pre>x-accordion</code> 渲染手风琴组件，我们被迫将“索引”手风琴组件模板放置在 <code v-pre>resources/views/components</code> 目录中，而不是将其与其他手风琴相关模板一起嵌套在 <code v-pre>accordion</code> 目录中。</p>
<p>幸运的是，Blade 允许你在组件的模板目录中放置一个 <code v-pre>index.blade.php</code> 文件。当组件存在一个 <code v-pre>index.blade.php</code> 模板时，它将作为组件的“根”节点被渲染。因此，我们可以继续使用上面示例中给出的相同 Blade 语法；然而，我们将调整我们的目录结构如下：</p>
<div class="language-none line-numbers-mode" data-highlighter="prismjs" data-ext="none" data-title="none"><pre v-pre class="language-none"><code><span class="line">/resources/views/components/accordion/index.blade.php</span>
<span class="line">/resources/views/components/accordion/item.blade.php</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="数据属性-特性" tabindex="-1"><a class="header-anchor" href="#数据属性-特性"><span>数据属性/特性</span></a></h3>
<p>由于匿名组件没有关联任何类，您可能会好奇如何区分哪些数据应作为变量传递给组件，而哪些属性应放在组件的<a href="#component-attributes">属性包</a>中。</p>
<p>您可以使用组件 Blade 模板顶部的 <code v-pre>@props</code> 指令来指定哪些属性应被视为数据变量。组件上的其他所有属性都将通过组件的属性包可用。如果您希望给一个数据变量一个默认值，您可以指定变量名作为数组键，而默认值作为数组值：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;!-- /resources/views/components/alert.blade.php --&gt;</span>
<span class="line"></span>
<span class="line">@props(['type' =&gt; 'info', 'message'])</span>
<span class="line"></span>
<span class="line">&lt;div {{ $attributes-&gt;merge(['class' =&gt; 'alert alert-'.$type]) }}&gt;</span>
<span class="line">    {{ $message }}</span>
<span class="line">&lt;/div&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>根据上述组件定义，我们可以这样渲染组件：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-alert type=&quot;error&quot; :message=&quot;$message&quot; class=&quot;mb-4&quot;/&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="访问父组件数据" tabindex="-1"><a class="header-anchor" href="#访问父组件数据"><span>访问父组件数据</span></a></h3>
<p>有时您可能希望在子组件内访问来自父组件的数据。在这些情况下，您可以使用 <code v-pre>@aware</code> 指令。例如，设想我们正在构建一个复杂的菜单组件，由父组件 <code v-pre>&lt;x-menu&gt;</code> 和子组件 <code v-pre>&lt;x-menu.item&gt;</code> 组成：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-menu color=&quot;purple&quot;&gt;</span>
<span class="line">    &lt;x-menu.item&gt;...&lt;/x-menu.item&gt;</span>
<span class="line">    &lt;x-menu.item&gt;...&lt;/x-menu.item&gt;</span>
<span class="line">&lt;/x-menu&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>&lt;x-menu&gt;</code> 组件可能有如下实现：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;!-- /resources/views/components/menu/index.blade.php --&gt;</span>
<span class="line"></span>
<span class="line">@props(['color' =&gt; 'gray'])</span>
<span class="line"></span>
<span class="line">&lt;ul {{ $attributes-&gt;merge(['class' =&gt; 'bg-'.$color.'-200']) }}&gt;</span>
<span class="line">    {{ $slot }}</span>
<span class="line">&lt;/ul&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>因为 <code v-pre>color</code> 属性只传递给了父组件（<code v-pre>&lt;x-menu&gt;</code>），它不会在 <code v-pre>&lt;x-menu.item&gt;</code> 内部可用。然而，如果我们使用 <code v-pre>@aware</code> 指令，我们也可以使它在 <code v-pre>&lt;x-menu.item&gt;</code> 内部可用：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;!-- /resources/views/components/menu/item.blade.php --&gt;</span>
<span class="line"></span>
<span class="line">@aware(['color' =&gt; 'gray'])</span>
<span class="line"></span>
<span class="line">&lt;li {{ $attributes-&gt;merge(['class' =&gt; 'text-'.$color.'-800']) }}&gt;</span>
<span class="line">    {{ $slot }}</span>
<span class="line">&lt;/li&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>[!WARNING]<br>
<code v-pre>@aware</code> 指令无法访问未通过 HTML 属性显式传递给父组件的父数据。未显式传递给父组件的默认 <code v-pre>@props</code> 值也无法通过 <code v-pre>@aware</code> 指令访问。</p>
</blockquote>
<h3 id="匿名组件路径" tabindex="-1"><a class="header-anchor" href="#匿名组件路径"><span>匿名组件路径</span></a></h3>
<p>如前所述，匿名组件通常是通过将Blade模板放置在您的<code v-pre>resources/views/components</code>目录中来定义的。然而，您可能偶尔也希望在默认路径之外，向Laravel注册其他匿名组件路径。</p>
<p><code v-pre>anonymousComponentPath</code> 方法接受匿名组件位置的“路径”作为其第一个参数，以及可选的“命名空间”，该命名空间是组件应该放置的位置作为其第二个参数。通常，这个方法应该在您应用程序的<a href="https://learnku.com/docs/laravel/11.x/providers" target="_blank" rel="noopener noreferrer">服务提供者</a>之一的<code v-pre>boot</code>方法中调用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 启动任何应用服务。</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">boot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token class-name static-context">Blade</span><span class="token operator">::</span><span class="token function">anonymousComponentPath</span><span class="token punctuation">(</span><span class="token constant">__DIR__</span><span class="token operator">.</span><span class="token string single-quoted-string">'/../components'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当组件路径像上面的例子那样注册时，没有指定前缀，它们也可以在您的Blade组件中不带对应前缀地渲染。例如，如果在上面注册的路径中存在一个<code v-pre>panel.blade.php</code>组件，它可以这样渲染：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-panel /&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>可以将“命名空间”前缀作为<code v-pre>anonymousComponentPath</code>方法的第二个参数提供：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Blade</span><span class="token operator">::</span><span class="token function">anonymousComponentPath</span><span class="token punctuation">(</span><span class="token constant">__DIR__</span><span class="token operator">.</span><span class="token string single-quoted-string">'/../components'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'dashboard'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>当提供了前缀时，该“命名空间”内的组件可以通过在渲染组件时将命名空间前缀添加到组件名称前来渲染：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;x-dashboard::panel /&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="构建布局" tabindex="-1"><a class="header-anchor" href="#构建布局"><span>构建布局</span></a></h2>
<h3 id="使用组件的布局" tabindex="-1"><a class="header-anchor" href="#使用组件的布局"><span>使用组件的布局</span></a></h3>
<p>大多数网络应用程序在不同页面上保持相同的一般布局。如果我们在创建的每个视图中都重复整个布局HTML，那将是非常繁琐且难以维护的。幸运的是，定义这种布局作为单个<a href="#components">Blade组件</a>然后在我们的应用程序中使用它是非常方便的。</p>
<h4 id="定义布局组件" tabindex="-1"><a class="header-anchor" href="#定义布局组件"><span>定义布局组件</span></a></h4>
<p>例如，想象我们正在构建一个“待办事项”列表应用程序。我们可以定义一个名为 <code v-pre>layout</code> 的组件，如下所示：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;!-- resources/views/components/layout.blade.php --&gt;</span>
<span class="line"></span>
<span class="line">&lt;html&gt;</span>
<span class="line">    &lt;head&gt;</span>
<span class="line">        &lt;title&gt;{{ $title ?? '待办事项管理器' }}&lt;/title&gt;</span>
<span class="line">    &lt;/head&gt;</span>
<span class="line">    &lt;body&gt;</span>
<span class="line">        &lt;h1&gt;待办事项&lt;/h1&gt;</span>
<span class="line">        &lt;hr/&gt;</span>
<span class="line">        {{ $slot }}</span>
<span class="line">    &lt;/body&gt;</span>
<span class="line">&lt;/html&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="应用布局组件" tabindex="-1"><a class="header-anchor" href="#应用布局组件"><span>应用布局组件</span></a></h4>
<p>一旦 <code v-pre>layout</code> 组件被定义，我们可以创建一个 Blade 视图来使用该组件。在这个例子中，我们将定义一个简单的视图来显示我们的任务列表：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;!-- resources/views/tasks.blade.php --&gt;</span>
<span class="line"></span>
<span class="line">&lt;x-layout&gt;</span>
<span class="line">    @foreach ($tasks as $task)</span>
<span class="line">        {{ $task }}</span>
<span class="line">    @endforeach</span>
<span class="line">&lt;/x-layout&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>请记住，注入到组件中的内容将被提供给我们的 <code v-pre>layout</code> 组件内的默认 <code v-pre>$slot</code> 变量。正如您可能已经注意到的那样，我们的 <code v-pre>layout</code> 也会尊重提供的 <code v-pre>$title</code> 插槽；否则，将显示默认标题。我们可以使用在 <a href="#components">组件文档</a> 中讨论的标准插槽语法，从我们的任务列表视图中注入自定义标题：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;!-- resources/views/tasks.blade.php --&gt;</span>
<span class="line"></span>
<span class="line">&lt;x-layout&gt;</span>
<span class="line">    &lt;x-slot:title&gt;</span>
<span class="line">        自定义标题</span>
<span class="line">    &lt;/x-slot&gt;</span>
<span class="line"></span>
<span class="line">    @foreach ($tasks as $task)</span>
<span class="line">        {{ $task }}</span>
<span class="line">    @endforeach</span>
<span class="line">&lt;/x-layout&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>现在，我们已经定义了我们的布局和任务列表视图，我们只需要从路由中返回 <code v-pre>task</code> 视图：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>Task</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">Route</span><span class="token operator">::</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/tasks'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'tasks'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'tasks'</span> <span class="token operator">=></span> <span class="token class-name static-context">Task</span><span class="token operator">::</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="使用模板继承的布局" tabindex="-1"><a class="header-anchor" href="#使用模板继承的布局"><span>使用模板继承的布局</span></a></h3>
<h4 id="定义布局" tabindex="-1"><a class="header-anchor" href="#定义布局"><span>定义布局</span></a></h4>
<p>布局也可以通过“模板继承”来创建。这是在引入 <a href="#components">组件</a> 之前构建应用程序的主要方式。</p>
<p>让我们看一个简单的例子。首先，我们来看一个页面布局。由于大多数Web应用在不同页面上保持相同的通用布局，因此将这个布局定义为一个单独的Blade视图使用起来是非常方便的：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;!-- resources/views/layouts/app.blade.php --&gt;</span>
<span class="line"></span>
<span class="line">&lt;html&gt;</span>
<span class="line">    &lt;head&gt;</span>
<span class="line">        &lt;title&gt;App Name - @yield('title')&lt;/title&gt;</span>
<span class="line">    &lt;/head&gt;</span>
<span class="line">    &lt;body&gt;</span>
<span class="line">        @section('sidebar')</span>
<span class="line">            This is the master sidebar.</span>
<span class="line">        @show</span>
<span class="line"></span>
<span class="line">        &lt;div class=&quot;container&quot;&gt;</span>
<span class="line">            @yield('content')</span>
<span class="line">        &lt;/div&gt;</span>
<span class="line">    &lt;/body&gt;</span>
<span class="line">&lt;/html&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如您所见，这个文件包含了典型的HTML标记。但请注意 <code v-pre>@section</code> 和 <code v-pre>@yield</code> 指令。<code v-pre>@section</code> 指令如其名称暗示的那样，定义了页面内容中的一个「部分」，而 <code v-pre>@yield</code> 指令则用于显示该「部分」里的所有内容。</p>
<p>现在我们已经定义了应用的布局，让我们再定义一个子页面，由它继承该布局。</p>
<h4 id="扩展布局" tabindex="-1"><a class="header-anchor" href="#扩展布局"><span>扩展布局</span></a></h4>
<p>在定义子视图时，使用 <code v-pre>@extends</code> Blade 指令指定子视图应该「继承」的布局。继承 Blade 布局的视图可以使用 <code v-pre>@section</code> 指令向布局的部分注入内容。请记住，如上面的示例所示，这些部分的内容将通过 <code v-pre>@yield</code> 在布局中显示：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;!-- resources/views/child.blade.php --&gt;</span>
<span class="line"></span>
<span class="line">@extends('layouts.app')</span>
<span class="line"></span>
<span class="line">@section('title', 'Page Title')</span>
<span class="line"></span>
<span class="line">@section('sidebar')</span>
<span class="line">    @parent</span>
<span class="line"></span>
<span class="line">    &lt;p&gt;This is appended to the master sidebar.&lt;/p&gt;</span>
<span class="line">@endsection</span>
<span class="line"></span>
<span class="line">@section('content')</span>
<span class="line">    &lt;p&gt;This is my body content.&lt;/p&gt;</span>
<span class="line">@endsection</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在这个例子中，侧边栏部分使用 <code v-pre>@parent</code> 指令来追加（而不是覆盖）内容到布局的侧边栏中。当视图被渲染时，<code v-pre>@parent</code> 指令会被布局的内容所替换。</p>
<blockquote>
<p>[!NOTE]<br>
与之前的例子相反, 在这个例子中，这个 <code v-pre>sidebar</code> 部分以 <code v-pre>@endsection</code> 结尾，而不是 <code v-pre>@show</code>。<code v-pre>@endsection</code> 指令仅定义一个部分，而 <code v-pre>@show</code> 则定义并 <strong>立即展示</strong> 该部分。</p>
</blockquote>
<p><code v-pre>@yield</code> 指令还接受第二个参数作为默认值。如果被 yield 的部分未定义，那么将渲染这个默认值。</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@yield('content', 'Default content')</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="表单" tabindex="-1"><a class="header-anchor" href="#表单"><span>表单</span></a></h2>
<h3 id="csrf-字段" tabindex="-1"><a class="header-anchor" href="#csrf-字段"><span>CSRF 字段</span></a></h3>
<p>每当您在应用中定义一个HTML表单时，都应该在表单中包含一个隐藏的 CSRF 令牌字段，以便 <a href="https://learnku.com/docs/laravel/11.x/csrf" target="_blank" rel="noopener noreferrer">CSRF保护</a> 中间件验证请求。您可以使用 <code v-pre>@csrf</code> Blade 指令来生成这个令牌字段。</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;form method=&quot;POST&quot; action=&quot;/profile&quot;&gt;</span>
<span class="line">    @csrf</span>
<span class="line"></span>
<span class="line">    ...</span>
<span class="line">&lt;/form&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="方法字段" tabindex="-1"><a class="header-anchor" href="#方法字段"><span>方法字段</span></a></h3>
<p>由于HTML表单不能直接发起 <code v-pre>PUT</code>、<code v-pre>PATCH</code> 或 <code v-pre>DELETE</code> 请求，所以您需要添加一个隐藏的 <code v-pre>_method</code> 字段来伪装这些HTTP请求动作或操作类型。您可以使用 <code v-pre>@method</code> Blade 指令来创建这个字段。</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;form action=&quot;/foo/bar&quot; method=&quot;POST&quot;&gt;</span>
<span class="line">    @method('PUT')</span>
<span class="line"></span>
<span class="line">    ...</span>
<span class="line">&lt;/form&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="验证错误" tabindex="-1"><a class="header-anchor" href="#验证错误"><span>验证错误</span></a></h3>
<p><code v-pre>@error</code> 指令可用于快速检查特定属性是否存在 <a href="https://learnku.com/docs/laravel/11.x/validation#quick-displaying-the-validation-errors" target="_blank" rel="noopener noreferrer">验证错误消息</a> 。在 <code v-pre>@error</code> 指令中，可以输出 <code v-pre>$message</code> 变量来显示错误消息：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;!-- /resources/views/post/create.blade.php --&gt;</span>
<span class="line"></span>
<span class="line">&lt;label for=&quot;title&quot;&gt;Post Title&lt;/label&gt;</span>
<span class="line"></span>
<span class="line">&lt;input id=&quot;title&quot;</span>
<span class="line">    type=&quot;text&quot;</span>
<span class="line">    class=&quot;@error('title') is-invalid @enderror&quot;&gt;</span>
<span class="line"></span>
<span class="line">@error('title')</span>
<span class="line">    &lt;div class=&quot;alert alert-danger&quot;&gt;{{ $message }}&lt;/div&gt;</span>
<span class="line">@enderror</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>由于 <code v-pre>@error</code> 指令会编译成一个「if」语句，所以您可以使用 <code v-pre>@else</code> 指令来在属性没有错误时渲染内容：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;!-- /resources/views/auth.blade.php --&gt;</span>
<span class="line"></span>
<span class="line">&lt;label for=&quot;email&quot;&gt;Email address&lt;/label&gt;</span>
<span class="line"></span>
<span class="line">&lt;input id=&quot;email&quot;</span>
<span class="line">    type=&quot;email&quot;</span>
<span class="line">    class=&quot;@error('email') is-invalid @else is-valid @enderror&quot;&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以将 <a href="https://learnku.com/docs/laravel/11.x/validation#named-error-bags" target="_blank" rel="noopener noreferrer">特定错误包的名称</a> 作为第二个参数传递给 <code v-pre>@error</code> 指令，以便在包含多个表单的页面上检索验证错误消息：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;!-- /resources/views/auth.blade.php --&gt;</span>
<span class="line"></span>
<span class="line">&lt;label for=&quot;email&quot;&gt;Email address&lt;/label&gt;</span>
<span class="line"></span>
<span class="line">&lt;input id=&quot;email&quot;</span>
<span class="line">    type=&quot;email&quot;</span>
<span class="line">    class=&quot;@error('email', 'login') is-invalid @enderror&quot;&gt;</span>
<span class="line"></span>
<span class="line">@error('email', 'login')</span>
<span class="line">    &lt;div class=&quot;alert alert-danger&quot;&gt;{{ $message }}&lt;/div&gt;</span>
<span class="line">@enderror</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="堆栈" tabindex="-1"><a class="header-anchor" href="#堆栈"><span>堆栈</span></a></h2>
<p>Blade 允许你推送到可以在其他视图或布局中的其他地方渲染的命名堆栈。这对于指定子视图所需的任何 JavaScript 库特别有用：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@push('scripts')</span>
<span class="line">    &lt;script src=&quot;/example.js&quot;&gt;&lt;/script&gt;</span>
<span class="line">@endpush</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果你想在给定的布尔表达式评估为 <code v-pre>true</code> 时 <code v-pre>@push</code> 内容，你可以使用 <code v-pre>@pushIf</code> 指令。</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@pushIf($shouldPush, 'scripts')</span>
<span class="line">    &lt;script src=&quot;/example.js&quot;&gt;&lt;/script&gt;</span>
<span class="line">@endPushIf</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以根据需要多次推入堆栈。要呈现完整的堆栈内容，请将堆栈的名称传递给 <code v-pre>@stack</code> 指令：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;head&gt;</span>
<span class="line">    &lt;!-- Head Contents --&gt;</span>
<span class="line"></span>
<span class="line">    @stack('scripts')</span>
<span class="line">&lt;/head&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果要将内容前置到堆栈的开头，应使用 <code v-pre>@prepend</code> 指令：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@push('scripts')</span>
<span class="line">    This will be second...</span>
<span class="line">@endpush</span>
<span class="line"></span>
<span class="line">// Later...</span>
<span class="line"></span>
<span class="line">@prepend('scripts')</span>
<span class="line">    This will be first...</span>
<span class="line">@endprepend</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="服务注入" tabindex="-1"><a class="header-anchor" href="#服务注入"><span>服务注入</span></a></h2>
<p>该 <code v-pre>@inject</code> 指令可用于从 Laravel <a href="https://learnku.com/docs/laravel/11.x/container" target="_blank" rel="noopener noreferrer">服务容器</a>中检索服务。传递给 <code v-pre>@inject</code> 的第一个参数是要将服务放入的变量的名称，而第二个参数是要解析的服务的类或接口名称：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@inject('metrics', 'App\Services\MetricsService')</span>
<span class="line"></span>
<span class="line">&lt;div&gt;</span>
<span class="line">    Monthly Revenue: {{ $metrics-&gt;monthlyRevenue() }}.</span>
<span class="line">&lt;/div&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="渲染内联blade模板" tabindex="-1"><a class="header-anchor" href="#渲染内联blade模板"><span>渲染内联Blade模板</span></a></h2>
<p>有时候，你可能需要将一个原始的 Blade 模板字符串转换为有效的 HTML。你可以通过 Blade 门面（facade）提供的 <code v-pre>render</code> 方法来实现这一点。<code v-pre>render</code> 方法接受 Blade 模板字符串以及可选的数据数组作为模板的输入内容：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Blade</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">return</span> <span class="token class-name static-context">Blade</span><span class="token operator">::</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello, {{ $name }}'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'name'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Julian Bashir'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Laravel通过将内联的Blade模板写入到 <code v-pre>storage/framework/views</code> 目录来渲染它们。如果你希望在渲染完Blade模板后，Laravel自动删除这些临时文件，你可以向方法提供 <code v-pre>deleteCachedView</code> 参数：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">return</span> <span class="token class-name static-context">Blade</span><span class="token operator">::</span><span class="token function">render</span><span class="token punctuation">(</span></span>
<span class="line">    <span class="token string single-quoted-string">'Hello, {{ $name }}'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">[</span><span class="token string single-quoted-string">'name'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Julian Bashir'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token argument-name">deleteCachedView</span><span class="token punctuation">:</span> <span class="token constant boolean">true</span></span>
<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="渲染blade片段" tabindex="-1"><a class="header-anchor" href="#渲染blade片段"><span>渲染Blade片段</span></a></h2>
<p>在使用诸如 <a href="https://turbo.hotwired.dev/" target="_blank" rel="noopener noreferrer">Turbo</a> 和 <a href="https://htmx.org/" target="_blank" rel="noopener noreferrer">htmx</a> 等前端框架时，你可能偶尔需要在HTTP响应中仅返回Blade模板的部分内容。Blade 「fragments（片段）」正是为此目的而设计的。要开始使用，请将你想要返回的Blade模板部分放置在 <code v-pre>@fragment</code> 和 <code v-pre>@endfragment</code> 指令之间：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@fragment('user-list')</span>
<span class="line">    &lt;ul&gt;</span>
<span class="line">        @foreach ($users as $user)</span>
<span class="line">            &lt;li&gt;{{ $user-&gt;name }}&lt;/li&gt;</span>
<span class="line">        @endforeach</span>
<span class="line">    &lt;/ul&gt;</span>
<span class="line">@endfragment</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后，在渲染使用此模板的视图时，你可以调用 <code v-pre>fragment</code> 方法来指定只有被指定的片段才包含在HTTP传出响应中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'dashboard'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'users'</span> <span class="token operator">=></span> <span class="token variable">$users</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">fragment</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'user-list'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>fragmentIf</code> 方法允许你根据给定的条件，有条件地返回视图的一个片段。否则，它将返回整个视图内容。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'dashboard'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'users'</span> <span class="token operator">=></span> <span class="token variable">$users</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">fragmentIf</span><span class="token punctuation">(</span><span class="token variable">$request</span><span class="token operator">-></span><span class="token function">hasHeader</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'HX-Request'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'user-list'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>fragments</code> 和 <code v-pre>fragmentsIf</code> 方法允许你在响应中返回多个视图片段。这些片段将被串联起来：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'dashboard'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'users'</span> <span class="token operator">=></span> <span class="token variable">$users</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">fragments</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'user-list'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'comment-list'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'dashboard'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'users'</span> <span class="token operator">=></span> <span class="token variable">$users</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">fragmentsIf</span><span class="token punctuation">(</span></span>
<span class="line">        <span class="token variable">$request</span><span class="token operator">-></span><span class="token function">hasHeader</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'HX-Request'</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">[</span><span class="token string single-quoted-string">'user-list'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'comment-list'</span><span class="token punctuation">]</span></span>
<span class="line">    <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="扩展-blade" tabindex="-1"><a class="header-anchor" href="#扩展-blade"><span>扩展 Blade</span></a></h2>
<p>Blade 允许你使用 <code v-pre>directive</code> 方法定义自己的自定义指令。当 Blade 编译器遇到自定义指令时，它将使用该指令包含的表达式调用提供的回调。</p>
<p>下面的示例创建了一个 <code v-pre>@datetime($var)</code> 指令，该指令格式化给定的 <code v-pre>$var</code>，它应该是 <code v-pre>DateTime</code> 的一个实例：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Providers</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Blade</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>ServiceProvider</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">AppServiceProvider</span> <span class="token keyword">extends</span> <span class="token class-name">ServiceProvider</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 注册应用的服务</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">register</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// ...</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 引导任何应用程序服务。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">boot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token class-name static-context">Blade</span><span class="token operator">::</span><span class="token function">directive</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'datetime'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$expression</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">return</span> <span class="token string double-quoted-string">"&lt;?php echo (<span class="token interpolation"><span class="token variable">$expression</span></span>)->format('m/d/Y H:i'); ?>"</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>正如你所见，我们将 <code v-pre>format</code> 方法应用到传递给指令中的任何表达式上。因此，在本例中，此指令生成的最终 PHP 将是：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token keyword">echo</span> <span class="token punctuation">(</span><span class="token variable">$var</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'m/d/Y H:i'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p><strong>注意</strong><br>
更新 Blade 指令的逻辑后，需要删除所有缓存的 Blade 视图。可以使用 <code v-pre>view:clear</code> Artisan 命令。</p>
</blockquote>
<h3 id="自定义回显处理程序" tabindex="-1"><a class="header-anchor" href="#自定义回显处理程序"><span>自定义回显处理程序</span></a></h3>
<p>如果你试图使用 Blade 来「回显」一个对象， 该对象的 <code v-pre>__toString</code> 方法将被调用。该 <a href="https://www.php.net/manual/en/language.oop5.magic.php#object.tostring" target="_blank" rel="noopener noreferrer"><code v-pre>__toString</code></a> 方法是 PHP 内置的「魔术方法」之一。但是，有时你可能无法控制 <code v-pre>__toString</code> 给定类的方法，例如当你与之交互的类属于第三方库时。</p>
<p>在这些情况下，Blade 允许你为该特定类型的对象注册自定义回显处理程序。为此，你应该调用 Blade 的<code v-pre>stringable</code> 方法。 <code v-pre>stringable</code> 方法接受一个闭包。这个闭包类型应该提示它负责呈现的对象的类型。通常，<code v-pre>stringable</code> 方法应该在应用程序的 <code v-pre>AppServiceProvider</code> 类的 <code v-pre>boot</code> 方法中调用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Blade</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Money<span class="token punctuation">\</span>Money</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 引导任何应用程序服务。</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">boot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token class-name static-context">Blade</span><span class="token operator">::</span><span class="token function">stringable</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Money</span> <span class="token variable">$money</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$money</span><span class="token operator">-></span><span class="token function">formatTo</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'en_GB'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>定义自定义回显处理程序后，您可以简单地回显 Blade 模板中的对象：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">Cost: {{ $money }}</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="自定义-if-声明" tabindex="-1"><a class="header-anchor" href="#自定义-if-声明"><span>自定义 if 声明</span></a></h3>
<p>编程自定义指令有时比定义简单的自定义条件语句更复杂。因此，Blade提供了一个 <code v-pre>Blade::if</code> 方法，它允许你使用闭包快速定义自定义条件指令。例如，让我们定义一个自定义条件，检查应用程序配置的默认“磁盘”。我们可以在 <code v-pre>AppServiceProvider</code> 的 <code v-pre>boot</code> 方法中这样做：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Blade</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 引导任何应用程序服务。</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">boot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token class-name static-context">Blade</span><span class="token operator">::</span><span class="token function">if</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'disk'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token function">config</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'filesystems.default'</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token variable">$value</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>一旦定义了自定义条件，就可以在模板中使用它：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@disk('local')</span>
<span class="line">    &lt;!-- 应用程序正在使用本地磁盘... --&gt;</span>
<span class="line">@elsedisk('s3')</span>
<span class="line">    &lt;!-- 应用程序正在使用 s3 磁盘... --&gt;</span>
<span class="line">@else</span>
<span class="line">    &lt;!-- 应用程序正在使用其他磁盘... --&gt;</span>
<span class="line">@enddisk</span>
<span class="line"></span>
<span class="line">@unlessdisk('local')</span>
<span class="line">    &lt;!-- 应用程序未使用本地磁盘... --&gt;</span>
<span class="line">@enddisk</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接<br>
我们的翻译工作遵照 <a href="https://learnku.com/docs/guide/cc4.0/6589" target="_blank" rel="noopener noreferrer">CC 协议</a>，如果我们的工作有侵犯到您的权益，请及时联系我们。</p>
</blockquote>
<hr>
<blockquote>
<p>原文地址：<a href="https://learnku.com/docs/laravel/11.x/blademd/16664" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/11.x/bl...</a></p>
<p>译文地址：<a href="https://learnku.com/docs/laravel/11.x/blademd/16664" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/11.x/bl...</a></p>
</blockquote>
</div></template>


